<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Promise 封装 AJAX</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">
</head>
<body>
	<div class="container">
		<h2 class="page-header">Promise 封装 AJAX 操作</h2>
		<button class="btn btn-primary" id="btn">点击发送 AJAX</button>
	</div>
	<script>
		// 接口地址 https://api.apiopen.top/getJoke
		const api = 'https://api.apiopen.top/api/getHaoKanVideo'
		const btn = document.querySelector('#btn')
		btn.addEventListener('click',function(){
			// 创建 Promise
			const p = new Promise((resolve,reject)=>{
				// 1.创建对象
				const xhr = new XMLHttpRequest()
				// 2.初始化
				xhr.open('GET',api)
				// 3.发送
				xhr.send()
				// 4.处理响应结果
				xhr.onreadystatechange = function(){
					if(xhr.readyState === 4){
						// 判断响应状态码 2xx
						if(xhr.status >= 200 && xhr.status < 300){
							// 控制台输出响应体
							resolve(xhr.response)
						}else{
							// 控制台输出响应状态码
							reject(xhr.status)
						}
					}
				}
			})
			// 调用then方法
			p.then(value=>{
				console.log(value);
			},reason=>{
				console.warn(reason)
			})
		})
	</script>
</body>
</html>